<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景演示切换</title>
</head>
    <style>
        :root{
            --color-primary: #3298db;
            --color-text: #333333;
            --bg-color: #ffffff;
        }
        :root[data-theme='dark']{
            --color-primary: #2980b9;
            --color-text: #ffffff;
            --bg-color: #333333;
        }

        body{
            background-color: var(--bg-color);
            color: var(--color-text);
            transition: all 0.3s ease;
        }
        .button {
            background-color: var(--color-primary);
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
<body>
<div id="container">
    <div>动态主题</div>
</div>
<button class="button" onclick="toggleTheme()">切换主题</button>
<button class="button" onclick="appendChildEle()">添加子元素</button>

<div>---------------</div>

<div id="container2"></div>
<script>
    function toggleTheme(){
        const root = document.documentElement;
        const currentTheme = root.getAttribute('data-theme')
        let newTheme = currentTheme === 'light' ? 'dark' :'light';
        root.setAttribute("data-theme",newTheme)
    }

    function appendChildEle(){
        // 2. 获取父元素
        const container = document.getElementById('container');

        const container2 = document.getElementById('container2');

        // 3. 使用appendChild添加子元素
        if (container.children[0]){
            container2.appendChild( container.children[0]);
        }else if (container2.children[0]) {
            container.appendChild(container2.children[0]);
        }


    }
</script>
</body>

</html>